<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-user-circle home-icon"></i>
            <a href="#">管理员管理</a>
        </li>
        <li class="active">管理员列表</li>
    </ul>
</div>

<div xmlns:th="http://www.thymeleat.org" class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">管理员列表</h4>
            <div class="row">
                <div class="col-xs-12">
                    <a id="addManager" href="#manager-modal" data-toggle="modal" class="btn btn-sm btn-success">
                        <i class="fa fa-plus"></i> 添加管理员
                    </a>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="manager-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>管理员账号</th>
                        <th>管理员姓名</th>
                        <th>创建时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="manager-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">×
                    </button>
                    <h5 class="modal-title">管理员信息</h5>
                </div>
                <div class="modal-body">
                    <form id="manager-form" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="name"> 管理员姓名：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="hidden" name="id" id="id" class="hidden">
                                    <input type="text" id="name" name="nickname" class="col-xs-9">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="account"> 账号：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" id="account" name="account" class="col-xs-9">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="password"> 密码：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="password" id="password" name="password" class="col-xs-9">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="password2"> 确认密码：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="password" id="password2" name="password2" class="col-xs-9">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="status"> 状态：</label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <label>
                                        <input id="status" name="status" class="ace ace-switch ace-switch-4 btn-flat"
                                               type="checkbox">
                                        <span class="lbl"
                                              data-lbl="启用 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 禁用"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                            class="fa fa-undo"></i> 取消
                    </button>
                    <button id="save-manager-btn" type="button" class="btn btn-sm btn-primary"><i
                            class="fa fa-check"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" th:inline="javascript">
        var manager_table, manager_validator;
        $(function () {
            //初始化表格
            manager_table = $('#manager-table').DataTable({
                language: {url: 'ace/json/dataTable_CN.json'},
                autoWidth: false,
                ordering: false,
                searching: false,
                serverSide: true,
                processing: true,
                deferRender: true,
                responsive: true,
                ajax: {
                    url: 'management/managerList'
                },
                fnDrawCallback  : function(){
                    this.api().column(0, {
                        search: 'applied',
                        order: 'applied'
                    }).nodes().each(function(cell, i) {
                        cell.innerHTML = i + 1;
                    });
                },
                columns: [
                    {
                        data: null,
                        targets: 0
                    },
                    {
                        data: 'account',
                        defaultContent: ''
                    }, {
                        data: 'nickname',
                        defaultContent: ''
                    }, {
                        data: 'createTime',
                        defaultContent: ''
                    }, {
                        data: function (row) {

                            return row.status == 0?"禁用":"启用";
                        }
                    }, {
                        data: function (row) {
                            var resetBtn, delBtn;
                            var editBtn = '<a  href="javascript:;" data-row="' + row + '" class="btn btn-xs btn-primary editManager"><i class="fa fa-pencil"></i> 编辑</a>';

                            if (row.id === [[${session.sysUser.id}]]) {
                                resetBtn = '&nbsp;&nbsp;<a href="javascript:;" disabled="disabled" data-id="' + row.id + '" class="btn btn-xs btn-warning"><i class="fa fa-undo"></i> 重置密码</a>';
                            } else {
                                resetBtn = '&nbsp;&nbsp;<a href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-warning resetPwd"><i class="fa fa-undo"></i> 重置密码</a>';
                            }

                            if (row.id === [[${session.sysUser.id}]]) {
                                delBtn = '&nbsp;&nbsp;<a href="javascript:;" disabled="disabled" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 删除</a>';
                            } else {
                                delBtn = '&nbsp;&nbsp;<a  href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger delManager"><i class="fa fa-trash"></i> 删除</a>';
                            }
                            return editBtn + resetBtn + delBtn;
                        }
                    }
                ]
            });

            jQuery.validator.addMethod("account", function (value, element) {
                var length = value.length;
                var account = /^(1\d{10})$/;
                return this.optional(element) || (length === 11 && account.test(value));
            }, "手机号码格式错误");

            //初始化表单校验
            manager_validator = $("#manager-form").validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    nickName: {
                        required: true,
                        rangelength: [2, 10]
                    },
                    account: {
                        required: true,
                        rangelength: [2, 10],
                        remote: {
                            url: 'management/isManagerExist',
                            type: 'get',
                            data: {
                                account: function () {
                                    return $("#account").val();
                                }
                            }
                        }
                    },
                    password: {
                        required: true,
                        rangelength: [6, 18],
                        equalTo: '#password2'
                    },
                    password2: {
                        required: true,
                        rangelength: [6, 18],
                        equalTo: '#password'
                    },
                    mobile: {
                        mobile: true
                    },
                },
                messages: {
                    nickName: {
                        required: "用户姓名不能为空",
                        rangelength: "姓名长度在2到10个字符之间"
                    },
                    account: {
                        required: "账号不能为空",
                        rangelength: "账号长度必须在2到10个字符之间",
                        remote: "账号已经被注册，请更换账号"
                    },
                    password: {
                        required: "密码不能为空",
                        rangelength: "密码长度必须在6到18个字符之间",
                        equalTo: "两次密码输入不一致"
                    },
                    password2: {
                        required: "确认密码不能为空",
                        rangelength: "密码长度必须在6到18个字符之间",
                        equalTo: "两次密码输入不一致"
                    },

                }, highlight: function (e) {
                    $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                }, success: function (e) {
                    $(e).closest('.form-group').removeClass('has-error');
                    $(e).remove();
                }, errorPlacement: function (error, element) {
                    if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                        var controls = element.closest('div[class*="col-"]');
                        if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                        else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                    } else if (element.is('.select2')) {
                        error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                    }
                    else if (element.is('.chosen-select')) {
                        error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                    }
                    else {
                        error.insertAfter(element.parent());
                    }
                }
            });


            //点击添加管理员按钮 初始化表单
            $("#addManager").click(function () {
                $("#manager-form #password").rules("add", {
                    required: true,
                    rangelength: [6, 18],
                    equalTo: '#password2',
                    messages: {
                        required: "密码不能为空",
                        rangelength: "密码长度必须在6到18个字符之间",
                        equalTo: "两次密码输入不一致"
                    }
                });
                $("#manager-form #password2").rules("add", {
                    required: true,
                    rangelength: [6, 18],
                    equalTo: '#password',
                    messages: {
                        required: "密码不能为空",
                        rangelength: "密码长度必须在6到18个字符之间",
                        equalTo: "两次密码输入不一致"
                    }
                });

                $("#manager-form #account").prop("disabled", false);
                $("#manager-form #password,#password2").parents(".form-group").show();
            });

            //模态框隐藏事件
            $("#manager-modal").on("hide.bs.modal", function () {
                $("#manager-form")[0].reset();
                manager_validator.resetForm();
                $("#manager-form .form-group").removeClass("has-error");
            });


            //提交表单
            $("#save-manager-btn").click(function () {
                if ($('#manager-form').valid()) {
                    $("#status").val($("#status").prop("checked"));
                    $("#manager-form").ajaxSubmit({
                        url: 'management/saveManager',
                        type: 'post',
                        data:{
                          "status":  $("#status").val()
                        },
                        success: function (data) {
                            $("#id").val("")
                            $("#manager-modal").modal("hide");
                            manager_table.ajax.reload();
                        }
                    });

                }
            });

            //点击编辑按钮，填充数据
            $("#manager-table tbody").on("click", ".editManager", function () {
                $("#manager-form #password").rules("remove");
                $("#manager-form #password2").rules("remove");
                var row = manager_table.row($(this).parents("tr")).data();
                $('#manager-form').autofill(row);
                $("#manager-form #status").prop("checked", row.status);
                $("#manager-form #roleId").val(row.roleId);
                $("#manager-form #password,#password2").parents(".form-group").hide();
                $("#manager-form #account").prop("disabled", true);
                $("#manager-modal").modal("show");
            });

            //点击删除按钮，删除管理员
            $("#manager-table tbody").on("click", ".delManager", function () {
                var id = $(this).data("id");
                bootbox.confirm("确定要删除这个管理员？", function (f) {
                    if (f) {
                        $.get("management/removeManager/" + id, function () {
                            manager_table.ajax.reload();
                        });
                    }
                });
            });

            //点击重置密码按钮，初始化管理员的密码
            $("#manager-table tbody").on("click", ".resetPwd", function () {
                var id = $(this).data("id");
                bootbox.confirm("确定要初始化这个管理员的登录密码？", function (f) {
                    if (f) {
                        $.get("management/resetPassword/" + id, function () {
                            bootbox.alert("该用户的密码初始化成功！");
                        });
                    }
                });
            });
        });
    </script>
</div>